<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import SwiperComponent from '@/components/SwiperComponent/SwiperComponent.vue'
import ReservationInfoComponent from '@/ComprehensivePackage/Detail/components/ReservationInfoComponent.vue'
import { getSceneryDetailService, getHotelDetailService, getRestaurantDetailService, getPostDetailService, addCollectService, queryISCollectedService } from '@/apis/detail.js'
import { getSystemInfo } from '@/utils/systemInfo.js'
import { useInfoStore, useUserStore } from '@/stores/index.js'
import { formatTime } from '@/utils/formatTime.js'

const UserStore = useUserStore()
const InfoStore = useInfoStore()

// 获取用户ID
const user_id = UserStore.UserInfoList.user_id

// 存储获取到的详情数据
const detailData = ref({})

// 存储获取到的预定信息数据
const reservationData = ref([])

// 存储接收到的详情ID
const detailID = ref(null)

// 存储接收到的类型type
const type = ref(null)

// 当前的收藏状态
const is_collect = ref(false)

// 胶囊定位的顶部Top
const menuBarTop = ref(0)
// 头部导航栏高度
const navigationBarHeight = ref(0)
// 状态栏高度
const statusBarHeight = ref(0)
// 头部导航栏总高度
const navTotalHeight = ref(0)

// 获取设备信息
const SystemInfo = async () => {
	const res = await getSystemInfo()

	// 微信小程序平台
	// #ifdef MP-WEIXIN
	menuBarTop.value = res.menuButtonTop
	navigationBarHeight.value = res.navHeight
	statusBarHeight.value = res.statusBarHeight
	navTotalHeight.value = res.navHeight + res.statusBarHeight
	// #endif
}

// 获取景点详情数据
const getSceneryDetail = async () => {
	const res = await getSceneryDetailService(detailID.value)
	detailData.value = res.data
	reservationData.value = detailData.value.scenery_reservation
}

// 获取酒店详情数据
const getHotelDetail = async () => {
	const res = await getHotelDetailService(detailID.value)
	detailData.value = res.data
	reservationData.value = detailData.value.hotel_reservation
}

// 获取餐厅详情数据
const getRestaurantDetail = async () => {
	const res = await getRestaurantDetailService(detailID.value)
	detailData.value = res.data
	reservationData.value = detailData.value.restaurant_reservation
}

// 获取攻略详情数据
const getPostDetail = async () => {
	const res = await getPostDetailService(detailID.value)
	// 格式化发布时间
	res.data.createdAt = formatTime(res.data.createdAt)
	detailData.value = res.data
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 点击地图图标跳转地图页面
const onClickMap = () => {
	uni.navigateTo({
		url: `/ComprehensivePackage/Map/Map?longitude=${detailData.value.longitude}&latitude=${detailData.value.latitude}&name=${detailData.value.name}`
	})
}

// 点击查看更多图标跳转更多信息页面
const onClickDetail = () => {
	// 将需要传递的信息存入pinia
	InfoStore.setInfoData(detailData.value)

	// 跳转页面
	uni.navigateTo({
		url: `/ComprehensivePackage/Info/Info?type=${type.value}`
	})
}

// 点击跳转到关联的景点/酒店/餐厅
const goToAssociation = () => {
	uni.navigateTo({
		url: `/ComprehensivePackage/Detail/Detail?detail_id=${detailData.value.association.detail_id}&type=${detailData.value.association.type}`
	})
}

// 点击添加/取消收藏
const onClickCollect = async () => {
	await addCollectService({ user_id: user_id, association_id: detailID.value, type: type.value })
	if (is_collect.value) {
		is_collect.value = false
	} else {
		is_collect.value = true
	}
}

// 查询收藏状态
const queryIsCollected = async () => {
	const res = await queryISCollectedService({ type: type.value, user_id: user_id, association_id: detailID.value })
	is_collect.value = res.collected
}

onLoad((option) => {
	if (option.detail_id) {
		detailID.value = option.detail_id
	}

	if (option.type) {
		type.value = option.type

		switch (option.type) {
			case 'scenery':
				getSceneryDetail()
				break
			case 'hotel':
				getHotelDetail()
				break
			case 'restaurant':
				getRestaurantDetail()
				break
			case 'post':
				getPostDetail()
				break
		}
	}

	SystemInfo()

	// 根据用户是否登录查询收藏状态
	if (UserStore.UserInfoList.token) {
		queryIsCollected()
	}
})
</script>

<template>
	<view class="container">
		<!-- 景点、酒店、餐厅详情 -->
		<template v-if="type !== 'post'">
			<!-- 顶部轮播图和自定义返回按钮 -->
			<view class="top" @tap="goBack">
				<!-- 返回按钮 -->
				<view class="back" :style="{ top: menuBarTop + 'rpx' }">
					<up-icon name="arrow-left" color="#050606" bold size="20"></up-icon>
				</view>

				<!-- 轮播图 -->
				<SwiperComponent :height="300" @tap.stop v-if="detailData && detailData.images" :list="detailData.images" :is_card="false"></SwiperComponent>
			</view>

			<!-- 头部标题栏 -->
			<view class="header">
				<view class="info">
					<!-- 名称 -->
					<view class="name">
						{{ detailData.name }}
					</view>

					<!-- 描述 -->
					<view class="description">
						{{ detailData.description }}
					</view>

					<!-- 等级和评分 -->
					<view class="rate">
						<up-tag v-if="detailData.grade" :text="detailData.grade" type="success" size="large"></up-tag>
						<up-tag :text="detailData.rating" size="large"></up-tag>
					</view>

					<!-- 时间和电话 -->
					<view class="time_phone">
						<view class="time">
							<view class="time_top">
								{{ type === 'scenery' ? '开放时间' : type === 'hotel' ? '开业时间' : '营业时间' }}
							</view>
							<view class="time_bottom">
								{{ detailData.opening_time }}
							</view>
						</view>

						<view class="phone">
							<view class="phone_top">电话</view>
							<view class="phone_bottom">
								{{ detailData.phone }}
							</view>
						</view>
					</view>

					<!-- 地址 -->
					<view class="address">
						<view class="address-left">
							{{ detailData.address }}
						</view>

						<view class="address-right" @tap="onClickMap">
							<up-icon name="map-fill" size="20"></up-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 预定信息 -->
			<ReservationInfoComponent
				:place_id="Number(detailID)"
				:place_name="detailData.name || ''"
				:reservation_info="reservationData"
				:reservation_type="type || ''"
			></ReservationInfoComponent>

			<!-- 信息介绍 -->
			<view class="introduce" @tap="onClickDetail">
				<view class="introduce-top">
					<view class="title">
						{{ type === 'scenery' ? '景点介绍' : type === 'hotel' ? '酒店介绍' : '餐厅介绍' }}
					</view>
					<view class="more">
						查看详情
						<up-icon name="arrow-right" bold></up-icon>
					</view>
				</view>

				<view class="introduce-content">
					<view class="content ellipsis-other">
						{{ detailData.introduce }}
					</view>
					<view class="image" v-if="detailData.images">
						<image :src="detailData.images[0].url" mode="aspectFill"></image>
						<image :src="detailData.images[1].url" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</template>

		<!-- 攻略详情 -->
		<template v-else>
			<!-- 顶部返回按钮 -->
			<view class="nav" :style="{ height: navTotalHeight + 'rpx' }">
				<view class="back" :style="{ height: navigationBarHeight + 'rpx', top: statusBarHeight + 'rpx' }" @tap="goBack">
					<up-icon name="arrow-left" color="#050606" bold size="25"></up-icon>
				</view>
			</view>

			<view class="post" :style="{ marginTop: navTotalHeight + 'rpx' }">
				<!-- 用户信息 -->
				<view class="user" v-if="detailData.user">
					<view class="avatar">
						<up-image :src="detailData.user.avatar" width="40" height="40" shape="circle"></up-image>
					</view>
					<view class="username">{{ detailData.user.username }}</view>
				</view>

				<!-- 攻略内容 -->
				<view class="post-content">
					<!-- 轮播图 -->
					<SwiperComponent :height="450" @tap.stop v-if="detailData && detailData.images" :list="detailData.images" :is_card="false"></SwiperComponent>
					<view class="post-detail">
						<view class="title">{{ detailData.title }}</view>
						<up-read-more v-if="detailData.content">
							<rich-text :nodes="detailData.content"></rich-text>
						</up-read-more>
						<view class="time">{{ detailData.createdAt }}发布</view>

						<!-- 攻略关联景点/酒店/餐厅 -->
						<view class="association" v-if="detailData.association" @tap="goToAssociation">
							<view class="left">
								<up-image radius="5" :src="detailData.association.image" width="70" height="70"></up-image>
							</view>
							<view class="right">
								<view class="name">{{ detailData.association.name }}</view>
								<view class="rate">{{ detailData.association.rating }}分</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="bottom-content">
				<view class="collect" @tap="onClickCollect">
					<up-icon name="heart-fill" v-if="is_collect" size="30" label="收藏" labelPos="bottom" color="red"></up-icon>
					<up-icon name="heart" v-else size="30" label="收藏" labelPos="bottom">></up-icon>
				</view>

				<view class="server">
					<button style="position: absolute; right: 0; height: 110rpx; width: 100%; opacity: 0; z-index: 9999" open-type="contact"></button>
					<up-icon name="chat" size="30" label="客服" labelPos="bottom"></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100%;
	padding-bottom: 170rpx;

	@mixin bottom-style {
		width: 100%;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 70rpx;
		display: flex;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center;
	}

	.top {
		position: relative;

		.back {
			width: 65rpx;
			height: 65rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			position: absolute;
			left: 30rpx;
			z-index: 999;
			background-color: rgba(255, 255, 255, 0.5);
		}
	}

	.header {
		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			margin: 20rpx 0;
			padding: 30rpx;
			border-radius: 30rpx;
			background-color: #ffffff;

			.name {
				font-size: 35rpx;
				color: #333333;
				font-weight: bold;
			}

			.description {
				font-size: 30rpx;
				color: #919499;
				margin: 10rpx 0;
			}

			.rate {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
			}

			.time_phone {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: 10rpx 0;
				height: 100rpx;

				.time {
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
					background-color: #f6fafd;
					border-radius: 30rpx;

					.time_top {
						color: #37c460;
						font-weight: bold;
					}
				}

				.phone {
					width: 55%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
					background-color: #f6fafd;
					border-radius: 30rpx;

					.phone_top {
						color: #37c460;
						font-weight: bold;
					}
				}
			}

			.address {
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-radius: 30rpx;
				background-color: #f6fafd;

				.address-left {
					width: 80%;
				}
			}
		}
	}

	.introduce {
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 40rpx;

		.introduce-top {
			display: flex;
			justify-content: space-between;
			font-size: 35rpx;
			font-weight: bold;

			.more {
				display: flex;
			}
		}

		.introduce-content {
			font-size: 28rpx;
			color: #919499;
			margin: 20rpx 0;

			.image {
				display: flex;
				height: 300rpx;
				justify-content: space-between;
				width: 100%;
				margin-top: 20rpx;

				image {
					border-radius: 30rpx;
					width: 45%;
				}
			}
		}
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;

		.back {
			position: absolute;
			left: 10rpx;
			display: flex;
			align-items: center;
		}
	}

	.post {
		.user {
			width: 100%;
			position: fixed;
			background-color: #fff;
			z-index: 999;
			display: flex;
			align-items: center;
			height: 100rpx;
			padding: 20rpx;
		}

		.post-content {
			display: flex;
			flex-direction: column;
			padding-top: 100rpx;
			padding-bottom: 100rpx;

			.post-detail {
				padding: 20rpx;
				font-size: 30rpx;
				line-height: 55rpx;
				background-color: #fff;

				.title {
					font-size: 40rpx;
					font-weight: bold;
				}

				.time {
					margin: 20rpx 0;
					padding: 20rpx 0;
					color: #666666;
					font-size: 25rpx;
					border-bottom: 2rpx solid #eeeeee;
				}

				.association {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #f8fafd;
					border-radius: 15rpx;

					.right {
						margin-left: 40rpx;

						.name {
							font-weight: bold;
							font-size: 35rpx;
						}
					}
				}
			}
		}
	}

	.bottom {
		position: relative;

		.bottom-content {
			@include bottom-style;
			.server {
				position: relative;
			}
		}
	}
}
</style>
